I'm currently working on a site that uses Twitter's Bootstrap 3. The site renders OK on Firefox, but on Chrome/Opera/Safri (basically browsers with WebKit or Blink as a layout engine) there's some weird padding or spaces, and CSS pseudoelements such as ":before" and ":after" are distributed all through the document. Also, there's the "style" attribute added on the body.
As an example on WebKit / Blink: https://i.sstatic.net/6jdMe.png
And on Gecko: https://i.sstatic.net/U7weW.png
I've dealt with WebKit handling wrong UTF8 with BOM in the past, but this is not the case as all files are encoded in UTF8 without BOM.
Any idea of what's going on here?
Thanks in advance!
The visibilty of psuedo elements (such as :before and :after) elements are new in the latest version of Chrome to make debugging easier. Those psuedo elements are there in Firefox, too, they just don't show up in the DOM inspector.
The psuedo elements are likely a clearfix hack which Bootstrap adds to the .row class (see the mixin.less file for .clearfix and .make-row mixins).
As for the style attribute on <body>, it's empty and not affecting anything. I can't find any specific references to why Chrome does this, but Chrome seems to add it on every page in the DOM inspector.
Are the padding/space issues actually visible on the page, or only in the DOM inspector?
