When developing and testing a websites responsiveness, is it wise to use chromes built in phone emulators to accurately do so?
I'm not sure what the issue is, but it could be one of these things.
Browser Cache
You may have made a change to that specific element in the past (fixed it) - but because of your browser's cache, it looks the same. Try clearing the cache on your device and see what happens.
Script Issues
There is a chance that the scripts you're using to make the arrow go up and down are a bit too much for the mobile device, and make it behave in a weird manner. Perhaps leaving it still on mobile or removing it all together would be the solution?
Edit: After looking through the errors on the website, it seems like you have quite a few errors and some critical warnings. If you patch these up, it might work on mobile.
If neither of these are a solution, let me know in the comments below.
The problem with your website seems to be a simple case of not loading CSS. Namely, you're trying to load /assets/css/app.css which appears to be missing (404).
Additionally, to fix the arrow's positioning, you'd need
#hero {
flex-direction: column;
}
Related
This is a really weird bug that has already consumed half of my day.
I am creating a chrome extension and when developing the extension locally it looks fine (like I want it to look).
However, once I load the extension to chrome to test performance the UI looks a lot smaller.
I made sure both windows are at 100% size.
What is weird is that actual values change. Font that should be 16px in development becomes 12px in "production".
I have attached 2 screenshots:
DEVELOPMENT (How it is meant to look):
PRODUCTION (How Chrome renders it, once the extension is uploaded):
There you can clearly see the changes in font size and UI. Is this a known Chrome bug or something?
Any help or hint is appreciated since I feel kind of stuck!
Thanks!
maybe the answer of this thread could help you:
LINK
Seeing the images you attached, I can only assume that an ancestor tag (it could be the button or an even more ancestor element) uses a font size that conflicts with your "font-light" class declared 16px.
If by "testing locally" you mean opening the html page with chrome outside of a loaded unpackaged extension, then accept my advice to review your method.
The same html + css combo loaded in Firefox (almost certainly) would give an even different result.
It is also possible that the issue\solution lies somewhere else, but the concepts just outlined need to be taken into consideration.
I work for a media company in Norway, and on rare occasion we see that an image will fail to render in its entirety. When this happens, we can refresh the page and the image will still only partially render. We have only ever seen this happen on Safari, and I have been able to reproduce it both on desktop (Safari 13.1.2) and mobile (iOS 14.4.1).
In the network tab, the image seems to have been fully delivered. The amount of bytes transferred is the expected amount. In fact, if we increment the height of the container by 1px, the image will suddenly appear in full, with no network activity occurring. In other words, the browser did receive the full image, it just is not showing.
Everything in the styling looks totally normal, but we still assumed this was somehow related to the CSS. However, we created a local override, and we were still able to reproduce with the following code:
<figure class="desktopi-45000 mobilei-45000 tableti-45000">
<picture>
<img itemprop="image" data-defer="view" sizes="(max-width: 640px) 640px,(max-width: 1024px) 1024px,1240px" title="- Du hører ikke hjemme her!" alt="- Du hører ikke hjemme her!" class="" srcset="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=760&height=342&compression=70 640w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=900&height=405&compression=80 1024w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=980&height=441&compression=80 1240w" src="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=380&height=171">
</picture>
</figure>
Here is an image comparison of what we see when the issue occurs. Note that it can take many, many tries before the bug occurs.
While trying to figure this out, we came across a similar question. However, the answers provided fail to elaborate on the root cause of the problem. One of the answers says to use decoding="sync", and that does seem to resolve the problem (at the very least, we cannot reproduce with that added). However, that is not a viable solution due to the performance impact it has. Given the other sites are not experiencing this problem and do not use decoding="sync", there is something else going on. The question, therefore, is why is this happening? What is causing this, and what can be done to resolve it?
When testing locally, this could seem to be fixed by adding either
decoding="async"
or
decoding="sync"
to the image-tag. For some reason, Safari and browsers running on Apple-products seem to struggle with automatically choosing the best suitable way of decoding images to render.
The most upvoted answer on the question you've come across does actually clarify it a bit. But for a bit more explanation, there the actual Mozilla WebDeveloper explanation here, and according to the second answer, iOS has a bit of a soft-limit when it comes to loading things in, and lower priority things (like something loaded asynchronously) are given less memory. By using decoding="sync" on an <img> tag you are specifying that it should be loaded synchronously, things loaded synchronously tend to be of a higher priority and therefore have a bit more memory to work with. You could opt to lower the resolution of the image in order to not have to rely on synchronous loading to allow a higher memory usage when loading the images in. As far as I can tell, this is, in fact, a known iOS/MacOS issue, but I cannot find any mention of work being made towards it. So synchronous loading or differing image sources (with different resolutions) or possibly even some modern implementation of iframe-style tech (like what's used on JSPs, or any kind of nesting like what can be found in Angular) can serve as ways to alieviate this issue, but it seems like something that Apple will have to solve in order for it to undoubtedly cause problems.
I may be wrong about this, since I am not an Apple Technician, but innate browser issues cannot be solved through Web Programming alone. I apologize for putting all this in an answer, but comments have a bit of a character limit and links count towards it.
in the developer tools, I noticed that if you change something in css, the picture is displayed completely...
it became a solution for me: after the picture was uploaded, using js I added css which will not affect the image on the page like (z-index) or what ever, but thanks to this, the picture began to be fully displayed
On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
I am having problem with a images that load in very small format on http://goo.gl/ZkLIIO.
I have tested it on every browser on Windows and i dont see the problem, but i have been told that on Safari on Mac it looks very weird (aka the images get very very small).
I took a look at CSS, and i cant find any problems.
Maybe this is weird question, but can somebody take a look and let me know is this happening on your end too?
Thank you
I'm on a mac and the web page isn't behaving consistently. Sometimes the images look like I imagine they're supposed to, and sometimes they're, as you said, extremely tiny.
Maybe try putting your JS at the bottom of the page instead? Maybe the page and the effects and your code are loading out of sequence?
In general, it seems kind of unresponsive. If I try resizing the window, the images get stuck at certain sizes, don't go back to the way they were before, etc.
I don't have enough reputation points to post screenshots; sorry!
Yes, they look small in Safari on Mac
try to check why press-gallery-item has computed width: 80px; (Use object inspector)
I will try to look deeper.