iOS 9 and El Capitan messing up CSS - javascript

Since Apple's recent update to El Capitan on desktop and iOS 9 on mobile, the css displays of our website have not been working. I am attaching two screenshots. The first is full screen - not only is the css ignored, but the photo content is not displayed. The second is a minimized screen which deploys our #media queries for the responsive design. Our code worked on OSX and iOS prior to the updates and works on all other platforms.
Here is the desktop screenshot:
Here is the mobile screenshot:
After fixing Safari errors in above code, I still have the issue - css not rendering correctly on kuttlefish.com (since ios9 and El Capitan Mac updates). One behavior I found that may provide insight: below 603px, the photos on the page suddenly appear. Above 603px, the photos don't display. I am pasting my #603 media css here for anyone who may have an idea. Tx.
#media only screen and (max-width: 603px) {
#contact-form{width:95%;}
.box {width:47.6%;float:left;position:static !important;margin:5% 1% 0 1%;}
.box .preview .thumb{width:100%;height:321px;}
.big-box {width:97.6%;}
.big-box .preview .thumb{width:100%;height:743px;}
.box .idata .description{width:100%;}
.fancybox-wrap{width:96.5% !important;}
#categorieswrapper{height:110px;}
}
~

You have a few errors in your bundled CSS. Chrome (and other browsers are much more forgiving about syntax errors).
Look in the Safari developer tools (here are instructions on how to enable it) and you will see errors in the console. There are a few syntax errors in your CSS, here is an example of one:
In the above you notice the asterisk before the border property, that is invalid CSS. As noted by other users there are a few others, see the comments.
However there are too many to list here, you need to fix them all to get the site to render properly:

Related

A problem repeatedly occurred on safari IOS how to fix?

I am getting so annoyed with this problem (A problem repeatedly occurred error message) on ios iphone. Working hard to build a website but only iphone with recent ios versions has this problem. Thought chrome will load the site on iphone but same problem. It's some ios efficiency issues. Getting rid of css transform and animation didn't solve it for me. My site was designed on adobe xd and I exported it using web export and got some javascript to scale it for any display size. I don't know how the page artboard size was too big like width: 3554px and height: 2346px. Never faced any problem on windows and android. Recently iphone testing made me so disappointed. The javascript isn't causing the problem here even though there is transform scaling involved. I tested an initial version of the website where the javascript scaling didn't cause any problem. Then I cleaned up all animations and css transform. But still same problem. Is this because of big page size like width 3554px ...? Can't safari handle this ...? Please help me to solve it. I don't want visitors from iphone get disappointed on my website. I have some article pages which use css media query with like page width 2358px less than the home page. I don't have iphone but checked on friend's iphone that the article pages load but home page doesn't load. Fun fact I have this thing implemented like when you auto rotate webpage will go to full desktop site. Both home and article pages have same problem. But old ios versions didn't show this problem. If you have an iphone please check the links if you know what is the reason behind this. Thanks in advance everyone ... help needed ...
Home page
https://elomymelo.com/index.html
Article page
https://elomymelo.com/jbl%20flip%206%20meaningful%20upgrade.html
I don't have mac book. So if you got mac on latest os and safari please check it and let me know if there is this problem on mac os or not ...
CSS
#Web_1920__1 {
position: absolute;
width: 3554px;
height: 2346px;
border: 0px grey solid;
background-color: rgba(255,255,255,1);
overflow: visible;
--web-view-name: Web 1920 – 1;
--web-view-id: Web_1920__1;
--web-scale-to-fit: true;
--web-scale-to-fit-type: width;
--web-scale-on-resize: true;
--web-center-horizontally: true;
--web-enable-deep-linking: true;
}
Those variables are for javascript and they're not causing the mentioned problem in the title ...
I've been debugging a similar issue reported by our userbase of individuals experiencing Safari on iOS 15.4.1 / 15.5 crashing with this error message of "A problem repeatedly occurred"
After some investigation, I've discovered that the issues likely has to due with iOS/Safari's update to WebGL 2.0 / WebGL for Metal, and issues with CSS #keyframes animations.
Specifically in regards to the issue I was experiencing, if there is a child element that has a CSS opacity rule applied to it within a parent element that has a CSS #keyframes animation applied to it, Safari would crash after several seconds and display this error.
If I removed the CSS opacity styling rule from the child element within this parent element that has the #keyframes css animation applied to it, OR if I just removed the css #keyframes animation styling rule from the parent element itself, this resolved the issue and the crash no longer occurs.
This issue does not appear to affect iPadOS 15.4.1, only iOS 15.4.1 or greater.
There's definitely some bugs that reside in this latest iOS / Safari update and I believe they are all related to this new WebGL 2.0 / WebGL for Metal integration (as per similar issues I read about here and here)
I have also reported this issue on the Apple Support forums, in hopes that they will address this in a future update.

JS/PHP automatically enter desktop version on mobile

So I've been working on a website for quite some time now and I have many elements that simply don't work with phones but I've noticed if I use the option desktop version everything is scaled and centered correctly. Now I want all my users to automatically check this option via javascript or something until I get the mobile version of the website working.
I'm not a pro, so please keep the answers simple. Thanks!
Use media queries for that. There is a nice MDN Web Docs page that you can check. To check if you're on a phone you can use the max-width CSS property.
Example:
If the browser window is 500px or smaller, the background color will be lightblue
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Hope I answered your question.
I explained it poorly. What I was trying to do is enable the checkbox in the mobile browser's menu that requests the desktop version of the website.
Instead, I have now improved my CSS skills and can make websites behave correctly on lower DPI devices.

CSS/JavaScript - Mobile JavaScript stops working under 771px

I have very strange problem.
I am developing mobile version to my website and i have very strange problem.
When i open my page with mobile that is having screen height over 770px everything is working well. So when i open it with 771px it's works.
But if i change the screen height to 770px the javascripts is not working any more.
First of all i found all #media only screen and (min-width: 771px) { rules in my CSS files and replaced them to #media only screen and (min-width: 350px) { but even with that change it is not working.
I've searched for any occurence of 770 or 771 in all my CSS files and style rules and there is none like that, but still the javascript is not working.
Here is my complete javascript: http://pastebin.com/HJyDrVYd
Here is my complete css: http://pastebin.com/M3Cu5qfF
Here is my HTML output of the page on which i have this problem: http://pastebin.com/CBgedJmZ
I run out of suggestions from where the problem may come and why the mobile version have working js with screen height 771px or higher but not lower.
Can you give any suggestion and help ?
Thanks in advance!

Chrome Media Query w/ Scrollbars Change

Chrome used to improperly exclude the scroll bar in its media queries. This means that with 1000px of visible space and a 17px scroll bar, other browsers would report 1017px as a width so far as Media Query is concerned, but webkit browsers (such as Chrome and Safari) did not do this.
These browsers could hit a specific size where a scroll bar would appear in one resolution, then change resolutions to another where it would appear, then it would go back to when it didn't... the solution caused an ugly blank space to appear where the scroll bar should, but it did not. It came out looking like a glitch, and the DOM resize events did not fire properly so it was not something you could react to properly in JS.
However, now in Chrome 29, this appears to have changed. Now they are going off of how the specification works and including the scroll bar in their media query calculations... just like Firefox and Internet Explorer (and how the specification says they should have all along). This fixes the bugs, but causes another problem in that the JS to try to detect the Chrome/Safari issue now will have false positives, because it is not a concern with newer versions of Chrome and I assume eventually Opera and Safari as well.
In light of all of this, I cannot find any information anywhere on when this was fixed in either Chrome or Webkit. I hate having to resort to browser version testing in my JS to work around these flaws, but I am just guessing blindly on Chrome 29+ for the moment as a temporary patch and would love an authoritative answer... I have tested in Safari 6.0.5, but the old method is still being used...
Does anybody know in what version of Chrome and/or Webkit this was fixed?
Chrome is no longer using the webkit engine as of Chrome v. 28 it now uses the Blink Rendering Engine. So no need to be detecting this for chrome unless you need it for previous versions.
For more on Blink: Blink Documnetation
For more on the Release: Next Web Article on Webkit/Blink Switch

iPad Safari CSS/Javascript

I have 2 questions;
For fixing iPad Safari issues, do we only need to update in the CSS...I mean can there be any kind of issue which might require a JS update as well to fix for iPad.
Also through JS, is user-agent check the only option OR is #media which is used in CSS can be used in JS as well, as an if..else condition?
Depends what you're trying to do, but Mobile Safari has a very good rendering engine I don't see where you would need to tweak CSS with JS to make it work.
Yes you can target just the iPad with the following syntax:
"
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
More here

Categories