I'm experimenting with javascript animation of svg and queueing them for display, first attempts are here: link It runs in the FOCS (firefox, chrome, opera, safari) browsers but not in Safari mobile (ipad/iphone) I'm aware of this question but it hasn't helped me so far (the namespace is already in the different svg files, and I experimented with the doc type).
This had nothing to do with svg rendering, but i was using the relative new js function .bind() which caused errors. In the meanwhile I learned how to switch on the debug console for mobile safari and this helped me to pinpoint the problem. Here is the solution!
Related
I am using an iframe on my React app. my problem is that in development and production the iframe content isn't loading on my pc or cellphone. The thing is that it does work on some other devices.
In addition to that it does work on Edge on all devices.
The webpage that should be displayed is also written in React.
I haven't found any mention on google of this problem.
What could cause such weird behavior?
I'm working on a react app with create-react-app ejected (so that I can use css modules). It works perfectly in Chrome and nearly perfectly in Firefox (just need to make a few minor css adjustments), but in Safari, only the navbar is visible. Looking in the safari developer tools, http requests seem fine and there are no error messages. There are a few warnings about using Cloudinary images without http requests, but I get the same warnings in Chrome and the app still works fine in that browser.
Also, the images and elements that don't appear in the browser do appear in the elements section of the developer tools. The (now invisible) links even work. I thought maybe it was a z-index problem, so I set the background color to transparent, but the page is still blank. I'm not using the fetch API (per other suggestions on stackoverflow), and I tried adding -webkit- prefix to my css where applicable. In addition to css modules, I'm using styled-components.
Without error messages I really don't know where to start looking for a solution. Any ideas what could be causing this behaviour? I'm running the app on localhost and also Heroku, and am having the same problems with both methods.
Thanks!
Solution: apparently Safari deals with css positioning and z-index differently than Chrome and Firefox. I played with positioning (fixed, absolute, relative etc) so that everything appeared correctly on Safari, and the resulting arrangement also worked for Chrome and Firefox.
Edit: But there are still positioning problems in Microsoft Edge, so I'll have to make adjustments for that, too.
Using straight-out-of-the-box lightbox2 (no edits, no mods). It has worked faithfully for the past couple of years since it's been in use. Suddenly noticed the other day that the image no longer fades in/out using Chrome. Image just displays on a new browser page. Works okay on Edge, but not sure about Safari as I've not yet checked that. Is this a Chrome issue? Any fixes?
I had the same problem. Tried many things.
Then I used "lightbox with jquery" javascript that's on their website: http://lokeshdhakar.com/projects/lightbox2
Update: It is not necessary to combine lightbox with jquery. The issue in my case was that I was using jquery older than version 2. If you user 2.0 or above version of Jquery, lightbox will start working again.
In using CKEditor latest version available now. In Chrome and Firefox it is working without any issues. But in IE7 I am facing some display issues.
When I click Image button the background goes black
body p in the bottom is not looking same as shown in Chrome
Also I get JavaScript error undefined is null or not an object
Please help
Are you sure that your page isn't running in Quirks mode (that the source is correct)? I don't see this issues e.g. on http://ckeditor.com/demo.
CKEditor 4.0 doesn't have support for Quirks mode - we're working on it right now.
I am trying to build a carousel feature using the twitter bootstrap library. My code is based off of the simple example provided at http://twitter.github.com/bootstrap/javascript.html#carousel.
The carousel works fine on desktop browsers chrome and firefox, but when I try the same page on the mobile version of chrome or safari for iOS, the carousel does not render.
I am including bootstrap.css and bootstrap-carousel.js.
What could be the issue here. Also, how do you even go about debugging issues with mobile browsers, as you don't have development tools that are included in the desktop browsers.
Thanks!
Please ignore this question. I had missed a trivial issue that had nothing to do with the library.