Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?

    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User last edited by

      Hallo,

      ich hab in einer VIS einen CSS-Hintergrund (Gradient Black 5) und habe das Problem, dass der Hintergrund ausschließlich in dem Bereich gezeichnet wird, der beim Starten der Visualisierung sichtbar ist. Scrolle ich zB nach unten, ist der Hintergrund an der Stelle weiß. Kann ich dieses Verhalten irgendwie beeinflussen?
      An den Werten hab ich schon herumgespielt - ohne Erfolg.
      0a07b2df-c915-4d46-ae5a-5c50239d6c95-image.png

      sigi234 OliverIO 2 Replies Last reply Reply Quote 0
      • sigi234
        sigi234 Forum Testing Most Active @Guest last edited by

        @oliver-w-leibenguth

        Screenshot (114).png

        rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
        
        1 Reply Last reply Reply Quote 0
        • ?
          A Former User last edited by A Former User

          Ich kann Dir nicht ganz folgen, bei mir steht dort:

          rgba(0, 0, 0, 0) linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%) repeat scroll 0% 0% / auto padding-box border-box

          Auch wenn ich da ein "[...] none repeat scroll [...]" draus mache, ändert das leider nix 😞

          sigi234 1 Reply Last reply Reply Quote 0
          • sigi234
            sigi234 Forum Testing Most Active @Guest last edited by sigi234

            @oliver-w-leibenguth

            Hast du das genau so wie bei mir eingetragen?

            Screenshot (114).jpg

            Homoran 1 Reply Last reply Reply Quote 1
            • Homoran
              Homoran Global Moderator Administrators @sigi234 last edited by

              @sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

              @oliver-w-leibenguth

              Hast du das genau so wie bei mir eingetragen?

              Screenshot (114).jpg

              @Oliver-W-Leibenguth
              deswegen immer alles zeigen!

              1 Reply Last reply Reply Quote 0
              • OliverIO
                OliverIO @Guest last edited by OliverIO

                @oliver-w-leibenguth
                Alternativ geht auch im css tab das folgende einzutragen

                body {
                    background-color: black;
                    color: white;
                }
                

                black kann natürlich auch mit einem der Angaben da oben gefüllt werden.
                Wobei mir da einige Angaben etwas seltsam vorkommen (padding-box, der slash)
                und ob border-box mit den Angaben einiger widgets kompatibel ist?
                Hier mal zur Definition von background. Das css propertie ist auch nur eine kurzform für verschiedene einzelnen Anweisungen. Wer soviele Angaben hat, sollte evtl die auf die direkten Anweisungen aufteilen, dann wird es auch klarer was was bedeutet.
                https://developer.mozilla.org/en-US/docs/Web/CSS/background?retiredLocale=de

                Diese Anweisung bei body hat den vorteil, das es den kompletten Hintergrund betrifft.
                Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

                Homoran 1 Reply Last reply Reply Quote 2
                • Homoran
                  Homoran Global Moderator Administrators @OliverIO last edited by

                  Danke für die Erklärung!

                  @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                  Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

                  das passt exakt!
                  ich hatte dann die fixen Größen zurückgenommen und der Background passte.
                  Ist ewig her, aber ich glaube dafür gab's dann anderen Ärger 😂

                  1 Reply Last reply Reply Quote 0
                  • ?
                    A Former User last edited by A Former User

                    Dann müsste ein...

                    body {
                        background: linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%)
                        color: white;
                    }
                    

                    ...eigentlich den gewünschen Effekt bringen, sieht in der Realität aber so aus:

                    9ea3c4d7-9ed8-46d3-81e0-b132114dc276-image.png

                    das erhoffte Ergebnis ist hingegen so:

                    d6702e4e-3a70-4f97-8bc6-a76ca15119c8-image.png
                    (Den Farbverlauf sieht man bei dem kleinen Stück jetzt natürlich nicht wirklich...)

                    OliverIO 1 Reply Last reply Reply Quote 0
                    • ?
                      A Former User last edited by

                      Ich hab mir mal meine Gedanken gemacht und bin zu dem Ergebnis gekommen, dass es bei einem Farbverlauf eigentlich auch nicht funktionieren kann:
                      Der Browser verteilt die Farben auf den sichtbaren Bereich des Bildschirms, hat (bei linearen Verläufen) oben 0% und ganz unten 100% der Farben hingemalt.
                      Der Teil des Bildschirms, den ich durch Scrollen quasi nachschiebe, liegt aber in dem Bereich jenseits der 100%. Dann könnte der Browser einfach mit der letzten Farbe weitermachen, zeichnet aber dummerweise den Systemhintergrund des Browsers.

                      1 Reply Last reply Reply Quote 0
                      • OliverIO
                        OliverIO @Guest last edited by OliverIO

                        @oliver-w-leibenguth
                        ich verstehe die antwort nicht so ganz und ist sie nicht auf eine andere frage gestellt?
                        so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.
                        wenn bereiche dann nicht so dargestellt werden, dann liegt es daran, das html-elemente, die in schichten darüber liegen, wieder eigene backgrounds haben, welche die anweisungen die darunter liegen überdecken.
                        html ist hierarchisch aufgebaut. das html und body tag bilden sozusagen die untersten ebenen, jedes weitere level der verschachtelung bildet wieder eine neue ebene welche darüber liegt.
                        jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements

                        hier mal eine grafik die das etwas visualisiert
                        950aaf14-5e86-4d6c-a37c-13eab7f68034-image.png

                        ? 1 Reply Last reply Reply Quote 0
                        • ?
                          A Former User @OliverIO last edited by

                          @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                          so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.

                          ...die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

                          OliverIO Homoran 2 Replies Last reply Reply Quote 0
                          • OliverIO
                            OliverIO @Guest last edited by

                            @oliver-w-leibenguth

                            wenn du denkst du hast einen fehler in der render engine deines browser gefunden:
                            für chrome/edge
                            https://bugs.chromium.org/p/chromium/issues/list
                            firefox
                            https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox
                            safari
                            https://bugs.webkit.org/
                            Opera
                            https://help.opera.com/en/touch/report-a-problem/

                            1 Reply Last reply Reply Quote 1
                            • Homoran
                              Homoran Global Moderator Administrators @Guest last edited by

                              @oliver-w-leibenguth sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                              die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

                              wobei immer noch die Frage offen ist

                              @sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                              Hast du das genau so wie bei mir eingetragen?

                              und auch CSS in Ebenen aufgebaut ist, wo

                              @oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

                              jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              508
                              Online

                              31.9k
                              Users

                              80.2k
                              Topics

                              1.3m
                              Posts

                              4
                              13
                              380
                              Loading More Posts
                              • Oldest to Newest
                              • Newest to Oldest
                              • Most Votes
                              Reply
                              • Reply as topic
                              Log in to reply
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                              The ioBroker Community 2014-2023
                              logo