I have a webpage that prints out tickets. I need the layout to correctly fill the paper. Im currently using this solution offered by LittleGnome. It works fine in Firefox, but in Chrome and IE the layout is messed up. The scale is too big and the content is spread over 4 pieces of paper instead of one.
When i used chromes dev tools to debug the print layout, it seemed like chrome cannot handle the flex containers correctly. All the elements on the layout have a size of 8000X4000 pixels, which is totally wrong. What might be causing this and how to fix this?
JsFiddle for the current version
Related
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
Safari applies my styles normally on page load for any size. However, it won't apply desktop styles if the window has been sized for mobile since at any point since the last reload.
To most easily see/trigger the behavior, open the site in Safari 13 at desktop size and see the desired layout (most notable here is the navigation bar). Resize the browser down to mobile layout (be sure the navigation switches to hamburger mode), then back up to the desktop layout. (You may also load the site at mobile first, then simply widen the window.)
See test case here: https://www.davincilabs.com/
Normal behavior (as on load):
After browser resize (Safari 13 only):
If you inspect menu elements, you will see that styles-l.css and navigation-desktop.css apply. After resizing up, the style sheets no longer apply.
IMPORTANT: This does not appear to be a JavaScript problem! The behavior still occurs if you disable JavaScript from the develop menu.
To recap:
Found in Safari 13 ONLY. Earlier versions of Safari that we have tested so far do not experience this. Other browsers tested (Chrome, Firefox, Edge) do not experience this.
I have only experienced on desktop. This might affect phones as well but it's impossible to reproduce with my test case; I'm not using any breakpoints small enough.
Initial page load is always correct
Issue triggers when window is enlarged greater than the mobile breakpoint
Safari appears to be no longer applying an entire loaded style sheet file (styles-l.css) to the page layout
Occurs even with JavaScript shut off
This must be fairly rare as I can't find other occurrences after a lot of searching, but it's affecting multiple sites I am working on. Finally, if you cause Safari to reconsider CSS rules in the inspector, (such as by manually editing the parameters of a media query,) Safari will instantly redraw the page correctly.
I had the same problem.
I don't know why but I have this problem just with the store on Magento 2 and with Safari 13. (Also others big e-commerce like The Protein Works, Bulk Powders, sigmabeauty ecc)
I fixed it with macOS Catalina 10.15.7 and Safari 14.
We have been using GWT for our product, We are finding difficulty resolving browser compatibility issues. Firefox displays screens properly, but specifically, some screens are too much wide, spreads across the whole chrome browser. Why so in chrome?
We tried removing some components, like some grids. thought it was responsible for these things. Nothing worked. Did Anyone face the same issue?
I'm learning more about Aurelia and while trying to migrate some layouts from HTML5 to Aurelia, I found that everything looks bigger when inside an aurelia template. Even the simplest layout possible, without any css styling or lib, looks bigger here compared with the raw HTML.
My monitor resolution is 1920 x 1080 and looking in Developer Tools, the HTML tag width is smaller (1920px width in HTML file vs 1280px in Aurelia rendered page).
I also tried my app in Google Chrome, Mozilla Firefox and Microsoft Edge and the only showing it how it should on both examples is Edge.
Here is a screenshot of same application on both browsers:
Playing with zoom on developer mode I discovered that if you put zoom: 1.5 on the left one, it gets the same size of the right one and zoom: 0.66 on right get the same of the left.
Does anyone know how to fix this? I'm getting crazy about it!!
Edit:
Here is another example with Chrome and Firefox. Attention to the sizes:
No css at all on these examples!
Since I didn't find why it was happening, I reinstalled my browsers and the problem is gone! I failed figuring out the reason it was happening but for now, that's enough for me.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar