im new to polymer just want to know why it looks different from chrome and fox?
chrome looks good but in fox it looks different like the color of the scaffold toolbar, logo and content, im using firefox 33.1
url: http://jigs-gfx.net/polymer/practice/
Firefox doesn't seem to be honoring your use of the deep shadow elements in your site.css file.
header-koh::shadow .logo{
Is valid in chrome, but not in Firefox. Firefox doesn't fully support web components and all their conventions out of the box, but you can enable the dom.webcomponents.enabled flag to turn them on and get a similar experience across browsers. A guide to how to enable the feature is given here:
Enable Custom Elements in Firefox
Firefox and IE both have full web component support in progress and hopefully will support them out of the box soon.
Related
I tried to make auto-complete input with mat-chip in Material Design. In this situation, I am using official Angular manual or StackBlitz on website. Everythings works, everything looks good as it's supposed to be on Google Chrome and also Opera browsers but chips' matChipRemove looks weird on Firefox browser. I shared images on browsers for better understanding.
Google Chrome / Opera Browser (Nicely)
Firefox Browser (Weird. There is a box behind icon.)
How does the code that works well in Google Chrome/Opera does not work in Firefox? What is causing this problem?
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.
I'm working on a site for a client and they've asked for a fix for the font rendering in FF and Chrome not looking as good as it does in IE. Here's a screenshot:
Does the IE text on the left look nicer because it hooks into Windows Cleartype, and FF doesn't? I think there is nothing i can do about this, am I right?
I don't think there is anything to be done about this. While IE does use ClearType fonts by default (this can be turned off in Tools > Internet Options > Advanced (tab) > Multimedia (settings option) > "Always use ClearType for HTML" (checkbox) ), turning it off doesn't seem to change the fact that IE will render text slightly differently than FF, Chrome, Opera etc. Even if it did fix it, it's a client-side option so you'd still be out of luck.
So, yeah you're stuck with some difference in text rendering based on the browser.
HOWEVER, you can try google's web fonts:
http://www.google.com/webfonts#ChoosePlace:select
They seem to look very similar cross-browser, though I see a slight difference between IE8 and FF5.
Plus, they look pretty cool and you don't need to install them on your system to use them.
There is no way to activate this from your website. Window's ClearType can only be activated in other programs via Windows' settings. It's not a browser feature, it's an OS feature.