Comments (6)
wavded
commented on July 18, 2024
thanks for your report, I cannot duplicate on Safari 5.0.5 on Windows but will try to grab a Mac and see if I can duplicate there. I did notice an issue on iOS Safari where the notifications wouldn't popup. Could you try something for me?
From the CSS file remove any references to:
visibility: hidden/visible
And see if it works?
from humane-js.
vaamyob
commented on July 18, 2024
That sort of fixed it. I had to make some z-index changes to allow select lists that were beneath (from a z-index point of view) the humane div to be clickable.
Also, something that only comes into play with the demo is that there is a slight flicker of the humane div when you select a different theme via the select list. Not sure how big of a deal that flicker would be, as it wouldn't really occur in a production environment.
I tested the below changes with Safari 5.0.5, Firefox 5.0, and Chrome 12.0.742.112
diff --git a/humane-themes/bold-dark.css b/humane-themes/bold-dark.css
index 0f3995c..5664ac9 100644
--- a/humane-themes/bold-dark.css
+++ b/humane-themes/bold-dark.css
@@ -12,10 +12,9 @@ html, body { height: 100%; }
-o-transition : all .2s ease-in;
-ms-transition : all .2s ease-in;
transition : all .2s ease-in;
- visibility : hidden;
- z-index : 100000;
+ z-index : -100000;
}
-.humane.humane-show { visibility : visible; }
+.humane.humane-show { z-index: 100000;}
/* ie hover state, recommended */
.humane:hover {
filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
diff --git a/humane-themes/bold-light.css b/humane-themes/bold-light.css
index bdb0383..3fdad50 100644
--- a/humane-themes/bold-light.css
+++ b/humane-themes/bold-light.css
@@ -12,10 +12,9 @@ html, body { height: 100%; }
-o-transition : all .2s ease-in;
-ms-transition : all .2s ease-in;
transition : all .2s ease-in;
- visibility : hidden;
- z-index : 100000;
+ z-index : -100000;
}
-.humane.humane-show { visibility : visible; }
+.humane.humane-show { z-index: 100000;}
/* ie hover state, recommended */
.humane:hover {
filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
diff --git a/humane-themes/libnotify.css b/humane-themes/libnotify.css
index d9017f8..5b9d186 100644
--- a/humane-themes/libnotify.css
+++ b/humane-themes/libnotify.css
@@ -12,10 +12,9 @@ html, body { height: 100%; }
-o-transition : all .2s ease-out;
-ms-transition : all .2s ease-out;
transition : all .2s ease-out;
- visibility : hidden;
- z-index : 100000;
+ z-index : -100000;
}
-.humane.humane-show { visibility : visible; }
+.humane.humane-show { z-index: 100000;}
/* ie hover state, recommended */
.humane:hover {
filter : progid:DXImageTransform.Microsoft.alpha(opacity=20);
from humane-js.
wavded
commented on July 18, 2024
yeah not ideal, more of a hack, i'll was able to dup on Safari on Mac (but not Windows, same ver), this seems like a Safari bug (namely, Safari doesn't animate the visibility property the same way Chrome, FF, etc do, it completely borks the whole animation), i'll play around with your workaround and see if someone else has reported this issue.
from humane-js.
wavded
commented on July 18, 2024
opened ticket - https://bugs.webkit.org/show_bug.cgi?id=64166
from humane-js.
wavded
commented on July 18, 2024
ticket confirmed, dup of this one -> https://bugs.webkit.org/show_bug.cgi?id=29984, patch in place, looks like it has to deal with when accelerated composition is on.
from humane-js.
wavded
commented on July 18, 2024
fixed in 6901b8b
from humane-js.
Related Issues (20)
- Stacking of notifications HOT 2
- Limiting number of pending notifications HOT 1
- fatty theme not on bower HOT 2
- Indicator count for queued notifications HOT 3
- css styling in messages HOT 1
- Missing semicolon at the end of the non-minified source HOT 2
- bower install humane-js does not reflect #master HOT 4
- remove before log (or error/info/etc) together option HOT 2
- Humane stylesheet displays scrollbars when it shouldn't HOT 2
- Option to manually attach humane div. HOT 2
- Humane.js Customize Style
- please add links to cdn to README HOT 1
- custom html markup HOT 1
- Adding hyperlinks to notification? HOT 2
- Add unit tests HOT 1
- Support for confirm and alert custom dialog HOT 1
- Is there a way to get a clicked element in the callback?
- Text doesnt feed to notification
- Use new syntax of linear-gradient HOT 5
- how do you "stack" the notifications? getting overlapped one over the other HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from humane-js.