Google Says My Site Not Mobile Friendly Because Content Wider than Screen
A while ago I ran into a problem where the last padding of my horizontal scrolling gallery does not display. I discussed my solutions with my friend Huijing, who then dived deeper into this issue and wrote an entertaining article about this.
As you can see from this image taken from Huijing's demo of the problem, the last padding to the right of the last image is not showing up.
So the pseudo element solution she discussed in the article was how I initially solved the problem. In a simple screenshot, the solution looks like this:
For your reference to play around with this, I copied Huijing's demo to a glitch project that extracts this solution for easier inspection, sorry Codepen 🙈.
Today, however, I received an issue ticket regarding this. Apparently Google SEO is not happy with that pseudo element. At least during the "mobile friendly test", it's complaining that "content wider than screen".
How does Google even figure out about that pseudo element? I've played around a little bit and realize that as long as I render that pseudo-element, even if I set its width to 0, it is still breaking the mobile friendly test.
Fun another fact: both me and Kenrick was then recognized as bots by Google because we were punching our test cases in the Mobile Friendly Test too frequently, and it gave us captchas.
Honestly, we haven't figured out the magic behind Google's SEO. The most relevant information I found on this topic is the Content Sized Correctly for Viewport audit, but our case actually passes the relevant test case mentioned in the info sheet, i.e., window.innerWidth === window.outerWidth. Maybe we should go to the next Google Dance and have some opinions about this?
Eventually, we decided that we'll go with the border solution, the other solution that Huijing mentions in her article, where you render a transparent border. She mentions an issue regarding scroll bars, as in you can't style them for windows browsers. Together with our special UI requirement, we added the border right to the last item instead.
The fact that border does and a zero width pseudo-element does not pass the audit by the name "content wider than screen" is still beyond my comprehension. Someone in the room is drunk.
Oh and speaking of scroll bars, you absolutely have to read this amazing article Two Browsers Walked into a Scrollbar.
A morning of my youth, ¯\_(ツ)_/¯