2

Is it possible for an operating system to cause a website to display differently? I've been trying to debug a graphical glitch for a client, but am unable to recreate it myself. From what I'm told, viewing the site (link below) on an iOS device causes an empty circle to appear in the homepage banner. However, I cannot replicate this bug on an Android phone nor a desktop browser, and do not personally have access to an iOS device.

I've requested members of my team to test this, and of the two iPhone users who responded, both reported this to occur in Safari and Google Chrome. It should be noted that both are on the latest release of iOS, in case this holds any significance.

Any help with tackling this issue is greatly appreciated. Note that the site is built on WordPress, but I've posted it here as it didn't seem like a WordPress-specific issue.

Website in Question: http://www.fineyachtfinishing.com/

Quangdao Nguyen
  • 1,343
  • 11
  • 25
  • ios only allows what amounts to browser skins. you cannot use anything OTHER than ios's webkit rendering engine. so technically everything is simply "the ios browser". – Marc B Oct 11 '16 at 22:08
  • the answer is basically *yes*. as @MarcB says apple only allows their particular build of the webkit rendering engine on their ios devices. and its lack of standards compliance is so bad, a french company [nexedi](https://www.nexedi.com/blog/NXD-Apple.Lawsuit.Blog) has even gone so far as to sue apple. – worc Oct 11 '16 at 22:17
  • I took a quick look but I can't identify where the circle is coming from in the web inspector. It only appears on my iPhone, not on the iOS simulator, Desktop Safari in responsive design mode or an iPad. There are a number of css files that aren't found including "iPhone.css" and a number of errors reported in your css files; perhaps start with those. – Paulw11 Oct 11 '16 at 22:37

2 Answers2

2

Took me a little bit of researching to figure this one out, but here is your solution to this problem.

*::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}

After I figured out what it was (the play button on the 'video' element), I found the solution here: Hide iPhone HTML5 video play button

Community
  • 1
  • 1
Isaac Fife
  • 1,659
  • 13
  • 15
0

Its not the operating system but the browser type. Different web browsers are built using different engines and these engines affect how web elements are displayed and formatted on these browsers

Deron Ellse
  • 16
  • 1