I have no idea why this has started happening but it is very annoying...
Basically, now when I copy CSS from Google Chrome Inspector, it formats it as follows:
border-radius: 50%;
width: 26
px
;
height: 26
px
;
color: transparent;
margin: 0 auto;
padding: 0;
position: relative;
Instead of how it's always worked like so:
border-radius: 50%;
width: 26px;
height: 26px;
color: transparent;
margin: 0 auto;
padding: 0;
position: relative;
Any idea on why this is happening and how I can fix it?
EDIT: I think it's to do with the latest Chrome update...
It seems it now has an option to set which metric you want to use, i.e. PX, EM etc...
Can this be disabled somehow?
It used to copy normally, now it takes those silly breaks.
I found this - https://support.google.com/chrome/a/answer/7125792
If you select CSS and Copy (Ctrl+C) it's broken, but if you use right-click > copy it's clean format.
//Hey, I have a solution. The Chromium developers have fixed it in the latest update .96 (it is not known when it will be stable) - until then, you just need to download Google Chrome Canary - it is fixed there. For now the stable version (with faulty CSS copying) is .95, please wait for the .96 update.
By reading the comments on the following bug report, I guess they're going to rollback this feature and go back to plaintext CSS editing.
https://bugs.chromium.org/p/chromium/issues/detail?id=1259088
Many people are complaining so we may have a setting in the future to enable/disable that.
using this method to disable css length problem.
You can disable it via the Settings > Experiments > Enable CSS length authoring tools in the Styles pane checkbox.
Related
More detail. I am working with a jcink forum. On the forum there is, for example, an element with a margin: 50px 0 parameter.
On Windows this is centered, but on Mac computers, specifically, it's positioned too high. It's difficult to troubleshoot because it is not a Safari issue or a media query issue, so I can't simply change my browser window (or use developer tools to emulate resolution) to check the issue, as I'm on PC. I have a friend who has an apple computer that I can remote into and occasionally troubleshoot on.
I notice also that if I completely remove margins from the element, on MAC it sets right against the top of the container, but on PC there seems to almost be a 20px or so of padding.
Similar to this issue, in the surrounding element there is less space (margin) on the bottom on PC versus Mac. When I add 25px, for example, it looks fine on PC but adds too much on Mac, respectively.
The overall question is: why is CSS rendering different on Mac than PC and how do I standardize this so that the changes are consistent? Only a few users on this site have Macs but it this should be working regardless of the operating system.
I am adding both the forum this is affecting and the code in question. '
Here is the link (just click the checkmark to get past the first page):
https://colu.jcink.net/index.php?showtopic=5560
The header area with the name "Guy Gardner" is what we are looking at. If you are on a PC it is properly aligned. If you are on a Mac, it is not.
PC, where it is formatted correctly: https://i.stack.imgur.com/lDtPz.png
The container in the top bar with the post header information:
height: 150px;
background: rgba(0,0,0,.8);
background-image: radial-gradient(rgba(255,255,255,1), rgba(0,0,0,1)), url(https://us-east-1-02860049-view.menlosecurity.com/c/0/i/aHR0cHM6Ly9pbWFnZXM4LmFscGhhY29kZXJzLmNvbS85NzQvOTc0NjgyLmpwZw~~?b=GyXJkglY&k=4gWbxECk-JP1jGISJKN_BinYM4QYfjipF4RFQU7liIE~);
background-size: cover;
background-attachment: fixed;
background-blend-mode: multiply;
color: var(--mgroup);
font-family: 'DC Fandom';
font-size: 2vw;
text-align: left;
text-transform: uppercase;
text-shadow: var(--colour4) 1px 0px;
letter-spacing: -1px;
overflow: hidden;
z-index: 3;
border-top: 10px solid var(--mgroup);
}```
```.ecmpost .ectopbar {
padding-bottom: 25px;
}```
One of the issues is that the padding (on the 1920 media query at least) adds too much padding on Mac, though on PC it's perfectly aligned.
Another issue has to do with the name on the left side, for example "Guy Gardner." is to high on Mac but centered (mostly) on PC.
```.topbarname {
padding: 50px 0px;
z-index: 2;
position: relative;
display: inline-block;
letter-spacing: 0px;
margin-left: 120px;
}```
(I don't prefer using absolute/relative positioning, someone else wrote this code, but I did confirm this was not the issue)
I attempted media queries, but this isn't a browser size issue (I thought it was initially). I found it was only affecting Mac users.
I found the solution to the issue at hand. First, I did need to apply a CSS reset. I needed to do this because chrome has a default 8px margin. It took some time to realize that this margin was not displaying on chrome in mac for some reason. I used this reset and studied what each element was doing before applying it: https://github.com/necolas/normalize.css/blob/master/normalize.css
Secondly, I found that there was also an issue with the way the line-height was being rendered with the particular font being used on the website (even though the reset did apply a 1.15 line-height fix as well). As a result it caused space at the top of the font in the PC version of Chrome while it did not render in the Mac version of chrome. This, ironically caused an 8px difference, which lead me to believe it to be a default margin issue, even after I had applied the margin reset to the html/body.
To fix the font issue I ran the font through a web font generator that converts system font for web font use, and made sure to select the "Fix vertical metrics" option which erases the extra line-height space. Transfonter was the site I used to do that: https://transfonter.org
If anyone has anything else to add that I may have missed, please let me know, but these steps fixed my problem. Thank you.
When looking at inconsistent OS or browser issues, remember to check your font and the line-height.
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
We have been using wkhtmltopdf in our application to generate PDF using HTML code.
This is how it is now in the config file:
$V{html2pdf} = "/opt/project/wkhtmltox/bin/wkhtmltopdf -q -s Letter --load-error-handling ignore --javascript-delay 100 --encoding utf8 --zoom 0.8 --disable-external-links --disable-internal-links --header-font-size 8 --header-font-name Verdana --header-left '[date]' --header-right 'Page [page] of [toPage]' --print-media-type --dpi 600 --user-style-sheet $V{PROJECT_DIR}/assets/c1/css/pdf_report.css ";
Recently we updated our servers to Ubuntu 14.04.5 LTS and also updated wkhtmltopdf to a newer version that is wkhtmltopdf 0.12.4 (with patched qt).
Now when I am try to generate a pdf, some of the html elements are displayed out of format. refer the screenshot.
This was not the case previously.
So started investigating the issue. Found some answers related to the wkhtmltopdf 0.12.4 (with patched qt) and suggestion to add --disable-smart-shrinking command line directive to the config file. I did that and there was not change.
Finally decided to start changing the css rules in --user-style-sheet $V{PROJECT_DIR}/assets/c1/css/pdf_report.css. After changing couple of css rules, tried testing. But strangely, it is not taking into consideration the new rules.
/* My Report heading ---- OLD */
table.formTablePdf td.title h5 {
margin: 0;
padding: 0;
/* Reset to black */
color: #000 !important;
line-height: 1.2em;
text-align: right;
}
/* My Report heading ---- NEW */
table.formTablePdf td.title h5 {
margin: 0;
padding: 1em;
/* Reset to black */
color: #000 !important;
line-height: 1.2em;
text-align: right;
padding-right: 2em;
}
Is there some bug in that too.. I found that it is an issue in the windows OS. the file should be prefixed with ///.
Let me know if I am doing anything wrong. Has anyone faced the same issue.
Thanks in advance.
I figured it out.
It was due to the new behavior of wkhtmltopdf for --dpi parameter. When I removed this parameter, and added --enable-smart-shrinking I was able to get the alignment of the content correctly. I am still facing an issue with the width of the PDF. My Page has a div which has a dynamic horizontal scrollbar which has table with lot of columns. In the previous version of wkhtmltopdf, the document use to zoom out/scale completely and capture everything. So at 100% zoom you can't read anything. You need to zoom to get look at the content. Now that is not happening. I am not sure why. I need to still check.
Ok, so this has been annoying me now for some time and I can not figure out what is causing this. I am wondering if anyone else is having this issue or noticed this.
In my css I have the html select options styled to look similar to this
On some computers it looks like how I've styled it and on some it appears something is overriding the style and then it looks like this
Some facts so far to help determine what is causing this.
All the computers I've tested are running windows 7.
My main pc that has numerous programs installed doe not have this issue.
My laptop has this issue.
My small pc that has a clean install with very few programs has this issue, also does not have any adobe products installed.
On the PC's with the issue, if I do a refresh in firefox the issue is fixed for about 5-10 min and then comes back.
If this were a CSS issue why would refreshing firefox temporarily fix and then later come back?
This leads me to think that some background plugin or setting is getting fetched after a refresh.
Could this be some other application on windows causing this?
Can someone tell me if they can reproduce this issue and also how to fix this and what is causing it?
Here is my CSS
SELECT {
color: #555558;
font-size: 16px;
margin: 0px 0px 8px 12px;
padding: 2px 0px 2px 5px;
width: 203px;
}
html
<select>
<option> - Select a Page - </option>
<option>Home Page</option>
<option>About Us</option>
<option>Camping Tips</option>
</select>
I posted several months ago regarding this issue however now the issue is not related to the version of firefox or CSS so the answers provided are misguided. Did Firefox 48 remove ability to style the select element?
Here is a list of plugins, as stated above, default installation produces this issue.
Please try this code
/* FIREFOX FIX OF UGLY SELECT BOXES */
#supports (-moz-appearance:none) {
select
{
-moz-appearance:none !important;
background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
background-position: calc(100% - 5px) center !important;
}
}
Thanks
This appears to be a bug that appeared since the release of multi-process Firefox. More info about Electrolysis here: https://wiki.mozilla.org/Electrolysis
If you're using Firefox 48 or later, you might be using e10s already. Check about:support and look for a number higher than 0 in the "Multiprocess Windows" entry.
Chances are: the computers affected are due to Multiprocess being enabled. This issue is being tracked on Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=910022
The issue should resolve itself with the release of Firefox 54.
Ok, so the solution here is to disable -> Multiprocess Windows
type about:config in the browser
then search for browser.tabs.remote.autostart (mine had a browser.tabs.remote.autostart.2)
change this to FALSE then restart the browser
this will make firefox run Multiprocess Windows disabled which fixes the issue
I know this is an old thread but the behavior still exists (FF 100 on OSX).
Look at this pagination bar:
Note also the larger height of the div with the select in it :-(
What I have done to resolve this: set a border on the select and set the background color to white.
select {
border: 1px solid #ddd;
border-radius: 3px;
background-color: white;
padding: 0px;
}
Now it looks like this:
Looks the same in Chrome.
test code :
-webkit-appearance: none; /* Remove style Chrome */
-moz-appearance: none; /* Remove style FireFox */
appearance: none; /* Remove style FireFox*/
In chrome my website is cramped at the bottom.
I have used a clear float to clear it and it works in Firefox but in Chrome, the bottom is all cramped? (I'll not mention IE because haven't tested yet but can fix for IE just don't know how to for Chrome)
http://justbedroomdesigns.com/
Try to change css to this,
.post-block {
width: 370px;
height: auto;
float: left;
clear: none;
padding: 5px 2px 2px 2px;
}
Perhaps you should correct the errors in your HTML first. For instance, decide if it should be HTML or XHTML, never reuse ID values, etc. If the problems still occur, ask again.
Take a look at this short post:
http://www.minitek.gr/tutorials/css-tutorials/item/12-how-to-fix-google-chrome-css?.html
More about Chrome rendering can be found here http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
One problem that I had with Chrome CSS is that when page is loaded locally (using XAMPP) it looks different
than when it's loaded from server.