Layout problem on Chrome for Android

Thanks for the report.

Can you please confirm whether the issue is present on the Publication demo here:
https://publicationdemo.wordpress.com/

It would also be helpful if you could let us know:

– what specific device you’re using (i.e. Nexus 7)
– what version of Android you’re using (i.e. Android 4.4.4 Kitkat) – visit https://whatismyandroidversion.com/ if you’re not sure

Thanks.

Hi Kathryin.

I just check and the issue is present also in the Publication demo. I tried with the following

– Nexus 7 (2012 version), Android 4.4.4, Chrome: issue is present only in landscape orientation.
– Samsung Tab 2 10.1, Android 4.2.2, Chrome: issue is present in both portrait and landscape orientation.
– Samsung Tab 2 10.1, Android 4.2.2, Samsung stock browser: issue is NOT present
– Lenovo Tab2 A10-70, Android 5.0.1, Chrome: issue is present in both portrait and landscape orientation.

I will also try installing a different browser on the Lenovo tablet and let you know later.

So I tried Firefox and Opera on the Lenovo Tablet.

– Firefox: issue is NOT present
– Opera: issue is present in both portrait and landscape

So looks to me as there is some issue with Chrome and Opera for Android starting from a certain screen width (no issue on my smartphones, while issues starts on Nexus 7 in lanscape). Chrome and Opera share the same rendering engine if I’m not wrong…

Update: as this look like a margin-left issue to me, I tried to play bit with the @media screen and (min-width: 1272px) { .no-sidebar .hero { }} declaration (and testing with a 1280px width screen).

The theme default is

.no-sidebar .hero {
margin-left: -378px;
margin-left: calc( ( -100vw + 660px ) / );
}

I think the second declaration is supposed to override the first is the browser supports calc and vw. However, if comment out the first delcaration, like:

.no-sidebar .hero {
/* margin-left: -378px; */
margin-left: calc( ( -100vw + 660px ) / 2 );
}

This results in a better (even if not perfect) rendering on Chrome for Android. A small white vertical bar is displayed on the left, so I suppose we would need a bit more negative margin, but at least it’s not cut off the screen.

https://dl.dropboxusercontent.com/u/15068406/2016-01-15%2019.40.26.jpg

I’m afraid that this little fix would break the theme somewhere else, so I’m not saying this is solving the issue, but looks to me as Chrome for Android is not overriding that margin-left declaration as I suppose you were expecting to do.

Hope this helps in investingating the issue.

Hi,

looks like I found a solution. I was able to debug Chrome on Android from my laptop, so I found out that the margin-left: calc( ( -100vw + 660px ) / ); declaration was seen as an Invalid property.

Eventually I found out that the problem lies in the ( and - separated by a space. If these are not separated, Chrome is accepting the property and the issue is fixed.

So I basically replaced all the ( - occurencies with (- and now it works like a charm. I have uploaded a fixed style.css at this link.

I would really appreciate if you could incorporate this fix and update the theme, so that I don’t need to override these declaration in my child theme.

Thanks

Thanks for all the testing and for the workaround you found.

Do you happen to have just the portion of the styles you modified handy, instead of the entire style.css? (If not, our developers can run a diff on the two files but if you have it handy, even better.)

Don’t have a diff, but there are the changes needed to fix the issue.

@media screen and (min-width: 768px) {
.hero {
margin-left: calc( (-100vw + 768px ) / 2 );
}
}

@media screen and (min-width: 1056px) {
.hero {
margin-left: calc( (-100vw + 960px ) / 2 );
}

.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

@media screen and (min-width: 1272px) {
.hero {
margin-left: calc( (-100vw + 1176px ) / 2 );
}
.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

@media screen and (min-width: 1416px) {
.hero {
margin-left: calc( (-100vw + 1320px ) / 2 );
}
.no-sidebar .hero {
margin-left: calc( (-100vw + 660px ) / 2 );
}
}

Thanks, iuk, much appreciated. ?? I’ll pass this along to our developers.

I just wanted to let you know that this has been fixed and will be included in the next update of Publication. Thanks again for the report.