Trying to update a style within a custom event
This works on Chrome but not in IE11
I guess the scope on IE this is changed differently to chrome
Any help appreciated
_handleMaximiseTap(e) {
this.updateStyles({
'--table-grid-height': 'calc(100vh - 9.5rem)'
})
}
Related
I have the following code
var span = document.createElement('span');
Polymer.dom(span).setAttribute('class','right-icon dfw-remove-icon dfw-24');
this.listen(span, 'tap', '_removeIt');
return span;
This segment of code is from an older project that uses Polymer 1 but I'm trying to make an application using Polymer 2. The third line doesn't work for me on Chrome, it gives me an error saying this.listen is not a function. How would I set a listener on the span element so that it triggers _removeIt() when clicked on?
this.listen equvialent
this.listen() effectively calls addEventListener(), so the equivalent of:
this.listen(span, 'tap', '_removeIt');
is:
span.addEventListener('tap', e => this._removeIt(e));
Use click instead of tap
In Polymer 1, tap was recommended for cross-platform consistency in handling clicks/taps. However, in Polymer 2, tap is no longer recommended as the default, given the advances of modern mobile browsers. You should use click instead of tap.
Don't do Polymer.dom(span)
There's no need to call Polymer.dom(span) if span is an element created with document.createElement().
I recently made a (responsive) redesign for a website of mine.
Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):
If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.
This even works if you click say 7 links in a row and then the first one again.
This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.
With remote debugging I see nothing.
I don't even know where to start debugging this ...
Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
I'm experiencing a major bug in IE 11 (latest version 11.0.9600.16521 on Windows 7). When on any form if I open a select dropdown all the other form fields on the page freeze. I can 'unfreeze' them by adjusting the Window size (causing a redraw). This seems to happen on any form what-so-ever.
To reproduce:
Open IE 11.0.9600.16521
Go to http://www.wikipedia.org/
Select any language from the language dropdown
Result:
language dropdown does not appear to get updated on the screen
the search box appears to be frozen - i.e. focus on select box and start typing but no text appears. However if you adjust the window size the form fields are updated and go back to working as normal (until you interact with another select element)
I can't find much in Google for this issue so maybe it's just something specific to my settings. Only thing that sounds somewhat similar to what I'm experiencing is this: http://connect.microsoft.com/IE/feedback/details/806679/ie-11-desktop-selecting-an-item-from-a-drop-down-list-on-a-webpage-causes-the-tab-to-crash. Anyone else able to reproduce this?
I had a similar issue with IE11 that turned out to be any modification to the .text property of an SELECT-option element. I eventually found the "hint" on stackoverflow here
How to fix IE select issue when dynamically changing options.
In my case I use straight JavaScript, and with so many inter-dependent SELECT boxes had to come up with a generic solution, so my solution was to intercept (defineGetter) assignment to any .text property of an HTMLOptionElement, and set a 1 ms timer to perform an add element and remove element as in the referenced post that is titled "I have the fix. We have to add and remove options list to trigger the rendering in IE8." Notice the reference to IE8, AFAIK IE has had several issues with SELECT boxes since at least IE7, possibly earlier.
So the code I added to one of my global scripts is as follows:
try { var IE11; // IE10 and IE11 removed ActiveXObject from the window object but it can still be instantiated
IE11 = new ActiveXObject('MSXML2.DOMDocument.6.0');
IE11 = null;
if (typeof(HTMLOptionElement) != "undefined") {
try { HTMLOptionElement.prototype.__defineSetter__(
'text',
function(original) {
return function(newValue) { var sel;
original.call(this, newValue);
if (!(sel=this.parentElement).fixIE) sel.fixIE = window.setTimeout(_fixIE_(sel), 1);
}
}(HTMLOptionElement.prototype.__lookupSetter__('text')));
} catch(e) {};
}
} catch(e) {}
}
// IE11 broke SELECT boxes again, modifying any options .text attribute "freezes" the SELECT so it appears disabled
function _fixIE_(selBox) {
return _fixIE_;
function _fixIE_(){ var lc = selBox.options.length;
selBox.options.add(new Option('',''));
selBox.options.remove(lc);
selBox.fixIE = undefined;
}
}
Phil
Go to programs
Then widdcom folder
Right click bttray
Go compatibility
Tick run as admin
Restart
I had the same problem in IE 11 on Dell Windows 7.
It was solved by turning off hardware rendering in IE, as you suggested in your link.
I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the disabled tag in the link like so:
<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>
I then toggle disabled in JavaScript.
This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the disabled tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle disabled, however, Firefox does respond to the tag and will begin to switch the second theme on/off.
How can I accomplish this goal?
I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.
This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your head tag and you probably have not loaded your JS libraries at that point.
<script>
window.onload = function() {
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.href = '/your/css/url.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
style.disabled = true;
};
</script>
NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.
So, if you were to put style.disabled = true; before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.
This is fixed in Firefox 68. You can now set the disabled attribute on <link> elements that also contain the ref=stylesheet attribute value. This will prevent the browser from loading that stylesheet until the disabled attribute is set to false or removed via JavaScript or some other method.
This brings Firefox in line with Chrome, Edge, Safari on support for this feature.
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
Late to the party here, but I just encountered this problem as well in Firefox. Turns out it had to do with HOW the disabled attribute is applied to the stylesheet via Javascript.
See the below code, assuming some trigger to swap disabled state between two stylesheets. The first function is what I tried first, and the latter is what ended up working for me.
var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');
function thisFailsInFirefox() {
myStyles.setAttribute('disabled', true);
myOtherStyles.removeAttribute('disabled');
}
function thisWorksInFirefox() {
myStyles.disabled = true;
myOtherStyles.disabled = false;
}
The thisWorksInFirefox function seemed to do the trick, maintaining functionality in Chrome / Safari / Edge, while making Firefox match in its behavior.
Everything in your theme stylesheet could be prefixed with a class. For instance, if you have the following in your theme css:
h1 {color: red;}
h2 {color: green;}
It becomes something like:
.theme-white h1 {color: red;}
.theme-white h2 {color: green;}
Then, to toggle your theme, you can use the following:
if (show theme) {
$('body').addClass('theme-white');
} else {
$('body').removeClass('theme-white');
}
I am trying to clone an HTML node using cloneNode() method of browser's DOM API and even using Jquery clone() function. The API works perfectly fine with HTML tags, However i am facing some issues while using it with HTML5 tags like time e.g.
The issue is that following <time> tag content <time class="storydate">April 7, 2010</time> gets converted to: <:time class=storydate awpUniq="912">April 7, 2010. Although IE renders the original time node correctly then why such issue with the clone API.
And this issue isn't observed in FF/ chrome. Please give some clue how to avoid this
Is this of any help? From the HTML5 Shiv issue list:
http://code.google.com/p/html5shiv/issues/detail?id=28
Links to
http://pastie.org/935834#49
solution seems to be:
// Issue: <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd
// Solution: use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)
// Example of HTML5-safe element cloning
function html5_cloneNode(element) {
var div = html5_createElement('div'); // create a HTML5-safe element
div.innerHTML = element.outerHTML; // set HTML5-safe element's innerHTML as input element's outerHTML
return div.firstChild; // return HTML5-safe element's first child, which is an outerHTML clone of the input element
} // critique: function could be written more cross-browser friendly?