[ERLEDIGT] Andere Methode für filter:blur(...);

[sunil2809]

Hii!

Ich habe auf meiner Seite ein Menü, bei dem, wenn man es öffnet, der Hintergrund dahinter unscharf werden soll. Ich probierte also filter: blur(...px); aus, fand aber sehr schnell heraus, dass diese Methode bei der Animation(!) vom Menü ziemlich verbuggt ist.

Ich möchte aber trotzdem nicht auf diesen Effekt verzichten und so frage ich euch:
Gibt es eine Alternative zu filter: blur(...px);?

Freue mich auf eure Antworten!
Gute Nacht und Beste Grüße
Linus

 

[basti1012]

Hii!
Ich probierte also filter: blur(...px); aus, fand aber sehr schnell heraus, dass diese Methode bei der Animation(!) vom Menü ziemlich verbuggt ist.

Hast du mal Link zur Seite oder den Code dazu ? Kann mir nicht vorstellen das dies so einfach zusammen gegenseitig stören soll.Vieleicht wen alles in ein Container passiert aber ohne Code kann man das nur schwer testen.

Andere möglichkeit als filter blur kenne ich jetzt nicht außer ein Bild machen was schon so aussieht

 

[sunil2809]

Gibts hier soetwas wie PM? Ich möchte ungern den Link hier allen präsentieren, da es für ein Projekt, das nicht von mir kommt, ist.

 

[basti1012]

Du könntest aber auch bei codepen.io ein Script/Seite erstellen wo man dein problem sehen kann.Somit können die anderen auch sehen was da los ist und für andere Leute die solche Fehler ergoggeln und dann n diesen Thema landen haben dann auch die möglichkeit das zu sehen. Fals du den Fehler bei Codepen nicht nachstellen kannst dann kann man ja immer noch PN machen.
Aber immer erst versuchen ohne PN weil andere wollen ja auch lernen und verstehen

 

[sunil2809]

Nach langem rumprobieren auf codepen (wo der bug übrigens nicht mehr da ist) bin ich zum Entschluss gekommen, den Link hier doch zu posten.
also: hier klicken.

Mich würde mal interessieren, ob das bei euch auch so blöd aussieht.

Beste Grüße
Linus

 

[scbawik]

Nach langem rumprobieren auf codepen (wo der bug übrigens nicht mehr da ist) bin ich zum Entschluss gekommen, den Link hier doch zu posten.
also: hier klicken.

Mich würde mal interessieren, ob das bei euch auch so blöd aussieht.

Beste Grüße
Linus

Sieh dir mal die Größe von dem Bild an: https://test.ahoilettering.de/design-studioz/images/header__img.jpg
Das frisst enorm Performance beim Rendern wie auch Laden.

Der blur-Filter funktioniert im Firefox meiner Erfahrung nach zudem nicht wirklich gut, der ist so schon völlig überfordert.
In Safari funktioniert es bestens, in Chrome auch wenn man das Bild deaktiviert.

 

[sunil2809]

Oh hab ich gar nicht drauf geachtet. (Also Fotograf ist man ja immer froh, wenn die Bilder groß sind...)

Habs jetzt auch mal in Safari probiert. Scheint tatsächlich an Firefox zu liegen.
Dann werde ich dieses Projekt ab jetzt in Chrome weiter bearbeiten!
Vielen Dank für die Hilfe und den Ratschlag!

Beste Grüße
Linus

 

[basti1012]

Ja 6 mb für eine Page ist etwas groß. Zu dein Menü und blur effekt kann ich für mein Browser ( Opera ) auch grünes Licht geben.
Soll dein X so komisch aussehen wenn man auf dein Menü klickt. Also da wenn das Hamburger Icon zum X wird ,ist das X nicht wirklich gleich aussehend.Ist das So gewollt oder auch ein Fehler der nicht gewünscht ist ?

 

[sunil2809]

Ja 6 mb für eine Page ist etwas groß. Zu dein Menü und blur effekt kann ich für mein Browser ( Opera ) auch grünes Licht geben.
Soll dein X so komisch aussehen wenn man auf dein Menü klickt. Also da wenn das Hamburger Icon zum X wird ,ist das X nicht wirklich gleich aussehend.Ist das So gewollt oder auch ein Fehler der nicht gewünscht ist ?

Ja, das habe ich auch behoben und jetzt klappt alles. Ich habe es auch mal auf meinem Windows Laptop zu Hause ausprobier und dort ging es auch in Firefox.
Und das mit dem x ist so gewollt, ja. #ichbineindesigner