Comments on: Speed Up Border-bottom Under Links

By: shokre

shokre — Thu, 12 May 2005 15:25:08 +0000

to andr3:
It really depends on the element. If you have a link tag somwhere in paragraph, and if you change link’s border size on hover, relayouting does not happen. Try for yourself, but change for instance from 1px border to 10px, and you’ll see that border flows under text.
But for instance if you have relative positioned div element and change it’s border size on hover, re-layouting does happen.

By: andr3

andr3 — Thu, 12 May 2005 14:05:05 +0000

nice shokre.. but i was left wondering. what if i have a 1px border, and on :hover i change it to a 2px border? re-layouting will take place anyway, right?

By: marko

marko — Wed, 11 May 2005 11:49:48 +0000

shokre, thanks for clearing things out. Nicely explained!

By: shokre

shokre — Wed, 11 May 2005 09:23:22 +0000

“… browser only has to change border-color, not draw the whole new border.”

Not exactly…
Browser’s rendering engine will allways draw border if specified. Even when it’s color is set to the color of the background, but not when it’s set to transparent.

The slowdown when using:a { text-decoration: none; } a:hover { text-decoration: none; border-bottom: 1px solid #0CF; }
comes from the fact that browser needs to re-layout all elements that are in the relationship with, or come after the link tag, because css has changed. Not in a strict sense, of course. But from the browser’s point of view, when you hovered over the link, you changed it’s css from
“{ text-decoration: none; }” to “{ text-decoration: none; border-bottom: 1px solid #0CF; }” and added extra information for rendering (in a form of browser’s rendering engine internal structures).

Re-layouting involves recalculating positions, invalidating, and redrawing the affected region, all regions affected by the affected region, and all regions in relation to the afected region.
Even if you don’t see changes when hovering over the link (i.e. if the link is part of the paragraph, and line spacing is big enough), the changes exist.

Reason why using your method, or using “{ text-decoration: underline }” is fast enough is because changing existing properities does not involve adding extra information to the rendering tree, so therefore does not involve re-layouting.

Anyway, interesting article…

By: marko

marko — Mon, 09 May 2005 06:55:24 +0000

Matt, good point! However, one must consider that IE 5.01 will not apply padding and border properties to inline HTML elements (such is ), no matter what we do.

By: Matt Hampel

Matt Hampel — Mon, 09 May 2005 03:26:02 +0000

Using the border-bottom of the parent element also has another benefit: it simplifies height and width properties, especially on older browsers. You no longer have to worry about a box redrawing on :hover because another pixel got added.

By: andr3

andr3 — Sun, 08 May 2005 23:42:26 +0000

actually, i’ve seen another weird behaviour related to this..

i had several links with border-bottom: 1px solid #666 and the :hover was border-bottom: 0px;

in a certain linux distro (gentoo) running a particular firefox version (1.0, i think), the whole website’s navbar flickered and the menu was corrupted. i can’t explain it very well, but it was very weird.

i adopted the same solution as you did.. use 1px border, with the parent’s bgcolor. and it worked.

By: marko

marko — Sun, 08 May 2005 18:39:50 +0000

Yes, in case of background pattern, you can try with the border-bottom: 1px solid transparent;, although I’m not absolutely positive wether that renders properly in major browsers. Edit: I’ve just checked it — IE can’t apply border-color: transparent;, even though it’s in the CSS2 specs. Instead of, the color property value is applied, i.e. color: red; border: 1px solid transparent; is rendered as color: red; border: 1px solid red;.

By: Philipe

Philipe — Sun, 08 May 2005 16:46:00 +0000

What if the background is a pattern? Then it wouldn’t look nice. Would something like border: 1px none #0CF; be better too?