Question

View this jsFiddle in a WebKit-based browser like Chrome or Safari and then compare it to what you see when you view it in a non-webkit based browser like Firefox or Internet Explorer.

You will see that they’re obviously not the same. Below is Chrome on the left and Firefox on the right:

The reason for this is that the fallowing small CSS markup is interpreted differently by WebKit compared to how every other browser interprets it:

span.upArrow.menu{
    margin: 36.1% 0 0 12.5%;
}

More exactly: WebKit interprets 36.1% not as 36.1% of the page width but rather 36.1% of the element width or height.

The reason for using percentages in the first place is because the site scales up and down depending on the scale of the screen. This piece of code is for the menu. So the site as it is now looks fine if you use the default browser on an Android or iPhone. But there’s a huge ugly triangle in the middle of the content on a Windows phone or if the user uses Opera or Firefox.

So my question then becomes. Is there any way to work around this bug in WebKit?

If it’s possible one could write separate markup for webkit and non-webkit browsers. But perhaps even better would be to find a solution which works in both cases.

Answer 1

Take a look at this fork.

I’ve changed the approach slightly, setting the menu items to position: relative and positioning your arrows rather than adding a margin to achieve the layout.

Here’s the updated CSS (remove the additional div and span from the selectors, they aren’t necessary):

.menuButton{
    display: inline-block;
    width: 32%;
    padding: 2% 0;
    position: relative;
}

.upArrow.menu{
    bottom: 0;
    left: 50%;
    margin-left: -15px;   
}

The negative margin matches the border width of your arrow, ensuring it will always be in the exact centre whatever else happens with your layout.