Skip to main content

Bug Tracker

Side navigation

#6643 closed bug (invalid)

Opened June 07, 2010 04:26PM UTC

Closed October 04, 2010 02:13AM UTC

Last modified March 13, 2012 08:22PM UTC

Cannot disable stylesheets in webkit browsers, test case included

Reported by: seasoup Owned by:
Priority: undecided Milestone: 1.4.3
Component: attributes Version: 1.4.2
Keywords: style disabled webkit Cc:
Blocked by: Blocking:
Description

Doesn't work on a style element in webkit:

document.getElementById('foo').disabled=true;

Workaround, works in at least FF3.6 and Safari 4.0.5:

document.getElementById('foo').sheet.disabled=true;

Webkit bug filed:

https://bugs.webkit.org/show_bug.cgi?id=25287

Minimum test case:

<html>

<head>

<style></style>

<style id="foo">

.hi {

display:none;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(function () {

$('.off').click(function () {

$('#foo').attr('disabled', 'true');

document.getElementById('foo').disabled=true;

document.getElementById('foo').sheet.disabled=true;

});

$('.on').click(function () {

$('#foo').attr('disabled', 'false');

});

});

</script>

</head>

<body>

<div class="hi">hi</div><br>

<a href="#" class="off">off</a><br>

<a href="#" class="on">on</a><br>

</body>

</html>

Attachments (0)
Change History (1)

Changed October 04, 2010 02:13AM UTC by addyosmani comment:1

priority: → undecided
resolution: → invalid
status: newclosed

I've attempting to use the workaround submitted in FireFox 3.6 and haven't been able to disable the sample stylesheet definition that way (I've tried both the commented out workarounds).

If you need to remove/prevent a stylesheet from being applied, you can use .remove() on the ID reference to that stylesheet without needing to refer to .sheet at all. This would prevent the stylesheet from applying to any elements. (Bare in mind that in IE, I believe this may not function as it may need a page-refresh to display the change).

A test case I've run on Safari, Chrome and FireFox where this works would is available here: http://jsfiddle.net/VzeBm/1/

If you're able to provide further information regarding this bug or how the desired behavior of a fix would work please feel free to submit a new ticket and we'll investigate further.