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.
Related
I am working on a project which is using rails for its backend and react components for its frontend. The app works fine in the Safari browser but for some unknown reason, in the chrome app, it loads the correct path but just renders a white screen showing nothing. If I check the developer tools console, I get to see the following errors
Similarly I refreshed the page and opened the network tab in developers tool and got to realise that some of the packages have not been downloaded.
The point to note is that the app also requires a certificate for running it locally and I have already downloaded that certificate and trusted it so it should also not be a problem. I am stuck at it for a really long time. Can anyone tell me the solution?
As the app works fine in safari, I don't think its related to code but its just a guess. So far I have tried disabling all the extension as well as clearing the browser data but haven't been able to see any progress...
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.
We're building a React/Flux application and everything is running and works fine, except the debugging experience is HORRIBLE in chrome!!
When trying to set breakpoints on legit lines like this:
ReactDOM.render(React.createElement(AccountInfo, null), document.getElementById('AccountInfoContainer'));
The breakpoint jumps down a few lines. Or it looks like the breakpoint is set properly, but when you run the page the breakpoint is no longer where you thought it was going to be.
We installed the React Dev tools, which gave us some nice functionality in a new tab "React" tab, but the standard "Sources" tab is just not working right.
We tried setting type="text/jsx" to see if Chrome would understand the file more correctly, but that resulted in the jsx file not even loading...could be the fault of IIS though not Chrome.
React seems so great, but it appears as though jsx really isn't supported all that well yet. Is there another chrome extension that will make jsx debugging work better?
We could also do server-side react rending and try to end up with a js file instead of jsx, but that seems like another can of worms...especially in ASP.NET MVC
I don't have any issues with the Chrome debugger and JSX as long as Source Maps have been generated.
You may notice I am also using ES6 in this screenshot, also without any issue.
Latest Update:
This got fixed in the new masonry version.
Original Post:
I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).
I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.
I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.
The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.
Update: I've noticed that the masonry website doesn't use paddings (like bootstrap does) but margins instead, and indeed when I remove paddings and add margins, it works. However the question remains - Why doesn't it work with paddings?
Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html
It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.
Here a screenshot of how it should look from Chrome:
And here a screenshot of how it looks for me in IE11:
Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?
After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.
Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.
The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.
Update:
This got fixed in the newer masonry version
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!